<template>
    <div class="header">
        <div class="header-wrap">
            <div class="logo" @click="toHome">
                <img src="../assets/logo.png" alt="">
            </div>
            <div class="meau">
                <nav>
                    <router-link to="/" exact-active-class="active">首页</router-link>
                    <router-link :to="{ path: '/news' }" exact-active-class="active">新闻</router-link>
                </nav>
            </div>
            <div class="button">
                <div class="ziliao" @click="toResource">
                    <img src="../assets/icons/ziliao.png" alt="">
                    <span>资料</span>
                </div>
                <div class="xuexi" @click="toUserCenter">
                    <img src="../assets/icons/xuexi.png" alt="">
                    <span>学习中心</span>
                </div>
                <button v-if="!token" class="loginbtn" @click="toLogin">登录</button>
                <a-popover trigger="click" placement="bottom" v-else>
                    <template slot="content">
                        <p style="cursor: pointer;" @click="loginOut">退出登录</p>
                    </template>
                    <div class="logoutbtn">
                        <span @click.stop="toUserCenter">{{ userInfo.id_type == 2 ? userInfo.teacher_name : userInfo.id_type == 1 ? userInfo.student_name : userInfo.nickname }}</span>
                        <a-icon type="down" />
                    </div>
                </a-popover>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Header',
    data() {
        return {
            userInfo: {},
            token: ''
        }
    },
    created() {
        this.userInfo = JSON.parse(localStorage.getItem('userinfo')) || {};
        this.token = this.userInfo.token;
        if (this.token) {
            // this.getUserInfo();
        }
    },
    methods: {
        async getUserInfo() {
            const res = await this.$request.get('api/user/user_info');
            if (res.code == 1) {
                this.userInfo = res.data.userinfo || {};
            }
        },
        toHome () {
            this.$router.push('/');
        },
        toLogin() {
            this.$router.push('/login');
        },
        toResource() {
            this.$router.push('/resource');
        },
        loginOut() {
            localStorage.removeItem('token');
            this.$store.commit('setToken', '');
            localStorage.removeItem('userinfo');
            this.$router.push('/login');
        },
        toUserCenter() {
            if (!this.token) {
                this.$message.error('请先登录');
                setTimeout(() => {
                    this.$router.push('/login');
                },300)
            } else {
                if (this.userInfo.id_type == 0 || this.userInfo.id_type == 1) {
                    this.$router.push('/courseCenter');
                } else {
                    this.$router.push('/teacher');
                }
            }
        }
    }
}
</script>
<style lang="less" scoped>
.header{
    width: 100%;
    background-color: #fff;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    .header-wrap{
        max-width: 1200px;
        height: 73px;
        margin: 0 auto;
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .logo{
        cursor: pointer;
        img{
            width: 167px;
            height: 30px;
        }
    }
    .meau{
        margin-top: 15px;
        nav{
            display: flex;
        }
        a{
            margin: 0 20px;
            font-size: 16px;
            font-weight: 400;
            color: #212442;
            cursor: pointer;
            display: block;
            padding-bottom: 10px;
            width: 32px;
        }
        .active{
            color: #3881F8;
            font-weight: bold;
            border-bottom: 4px solid #3881F8;
            border-radius: 4px;
            width: 32px;
        }
    }
    .button{
        display: flex;
        align-items: center;
        .ziliao{
            width: 72px;
            height: 40px;
            background: #EBF2FE;
            border-radius: 8px;
            display: flex;
            align-items: center;
            margin-right: 20px;
            justify-content: center;
            img{
                width: 18px;
                height: 18px;
                margin-right: 8px;
            }
            span{
                font-weight: 400;
                font-size: 14px;
                color: #212442;
            }
        }
        .xuexi{
            width: 100px;
            height: 40px;
            background: #EBF2FE;
            border-radius: 8px;
            display: flex;
            align-items: center;
            margin-right: 20px;
            justify-content: center;
            img{
                width: 18px;
                height: 18px;
                margin-right: 8px;
            }
            span{
                font-weight: 400;
                font-size: 14px;
                color: #212442;
            }
        }
        .loginbtn{
            width: 110px;
            height: 40px;
            background: linear-gradient( 90deg, #3881F8 0%, #5EA3FE 100%);
            border-radius: 8px;
            line-height: 40px;
            text-align: center;
            font-weight: 400;
            font-size: 16px;
            color: #FFFFFF;
            border: none;
            cursor: pointer;
        }
        &:hover{
            cursor: pointer;
        }
        .logoutbtn{
            width: 110px;
            height: 40px;
            background: #F7F7F7;
            border-radius: 8px;
            font-weight: 400;
            font-size: 16px;
            color: #000000;
            border: none;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            span{
                padding-right: 5px;
            }
        }
    }
    .userinfo{
        margin-top: 15px;
        width: 110px;
        height: 40px;
        background: #F7F7F7;
        border-radius: 8px;
        border: 1px solid #D6D6D6;
        font-weight: 400;
        font-size: 14px;
        color: #000000;
        line-height: 40px;
    }
}
</style>